HTML SVG Graphics

HTML SVG வெக்டர் கிராபிக்ஸைக் கற்றுக்கொள்ளுங்கள்

SVG (Scalable Vector Graphics)

SVG வெக்டர்-அடிப்படையிலான கிராபிக்ஸை XML இல் வரையறுக்கிறது, இது நேரடியாக HTML பக்கங்களில் உட்பொதிக்கப்படலாம்.

SVG கிராபிக்ஸ் அளவிடக்கூடியவை

அவை பெரிதாக்கப்பட்டாலோ அல்லது அளவு மாற்றப்பட்டாலோ எந்த தரமும் இழக்காது:

SVG

மேலே உள்ள SVG இல் கர்சரை வைத்து அளவைக் காண்பிக்கவும்

🌐 உலாவி ஆதரவு:

SVG அனைத்து முக்கிய உலாவிகளாலும் ஆதரிக்கப்படுகிறது.

SVG என்றால் என்ன?

Scalable Vector Graphics

SVG என்பது Scalable Vector Graphics என்பதன் சுருக்கமாகும்

வலைத்தளத்திற்கு

SVG வலைத்தளத்திற்கான வெக்டர்-அடிப்படையிலான கிராபிக்ஸை வரையறுக்கப் பயன்படுகிறது

XML வடிவம்

SVG XML வடிவத்தில் கிராபிக்ஸை வரையறுக்கிறது

அனிமேஷன்

SVG கோப்புகளில் உள்ள ஒவ்வொரு உறுப்பு மற்றும் பண்புக்கூறும் அனிமேஷன் செய்யப்படலாம்

W3C பரிந்துரை

SVG ஒரு W3C பரிந்துரையாகும்

ஒருங்கிணைப்பு

SVG CSS, DOM, XSL மற்றும் JavaScript போன்ற பிற தரங்களுடன் ஒருங்கிணைகிறது

<svg> உறுப்பு

HTML <svg> உறுப்பு SVG கிராபிக்ஸிற்கான ஒரு கொள்கலனாகும்.

SVG பாதைகள், செவ்வகங்கள், வட்டங்கள், பலகோணங்கள், உரை மற்றும் பலவற்றை வரைய பல முறைகளைக் கொண்டுள்ளது.

🎨 SVG வரைவு முறைகள்:

  • <circle> - வட்டங்களை வரைய
  • <rect> - செவ்வகங்களை வரைய
  • <line> - கோடுகளை வரைய
  • <polygon> - பலகோணங்களை வரைய
  • <text> - உரையை வரைய
  • <path> - சிக்கலான பாதைகளை வரைய

SVG வட்டம்

உதாரணம்

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

பண்புக்கூறு விளக்கம்:

  • cx: வட்டத்தின் மையத்தின் x-ஆயம்
  • cy: வட்டத்தின் மையத்தின் y-ஆயம்
  • r: வட்டத்தின் ஆரம்
  • stroke: வெளிவரையரை நிறம்
  • stroke-width: வெளிவரையரை அகலம்
  • fill: நிரப்பும் நிறம்

SVG செவ்வகம்

உதாரணம்

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

பண்புக்கூறு விளக்கம்:

  • x: மேல் இடது மூலையின் x-ஆயம்
  • y: மேல் இடது மூலையின் y-ஆயம்
  • width: செவ்வகத்தின் அகலம்
  • height: செவ்வகத்தின் உயரம்

தெளிவுத்தன்மை மற்றும் வட்ட மூலைகளுடன் SVG செவ்வகம்

உதாரணம்

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

புதிய பண்புக்கூறுகள்:

  • rx: x-அச்சில் வட்ட மூலை ஆரம்
  • ry: y-அச்சில் வட்ட மூலை ஆரம்
  • opacity: தெளிவுத்தன்மை (0.0 முதல் 1.0 வரை)
  • style: CSS பாணிகளைப் பயன்படுத்துதல்

SVG நட்சத்திரம்

உதாரணம்

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

<polygon> உறுப்பு:

points: நட்சத்திரத்தின் ஒவ்வொரு முனையின் x,y ஆயங்களின் பட்டியல். ஒவ்வொரு ஆயத்தொகுப்பும் காற்புள்ளிகளால் பிரிக்கப்படுகிறது.

SVG கிரேடியண்ட் நீள்வட்டம் மற்றும் உரை

உதாரணம்

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>
SVG Sorry, your browser does not support inline SVG.

முக்கிய கருத்துக்கள்:

  • <defs>: மீண்டும் பயன்படுத்தக்கூடிய வரையறைகளைக் கொண்டுள்ளது
  • <linearGradient>: நேரியல் கிரேடியண்டை வரையறுக்கிறது
  • fill="url(#grad1)": கிரேடியண்டை நிரப்பு நிறமாகப் பயன்படுத்துகிறது
  • <ellipse>: நீள்வட்டத்தை வரையறுக்கிறது (cx, cy, rx, ry)

SVG மற்றும் கேன்வாஸ் இடையே உள்ள வேறுபாடுகள்

SVG என்பது XML இல் 2D கிராபிக்ஸை விவரிக்கும் ஒரு மொழியாகும், கேன்வாஸ் உடனடியாக 2D கிராபிக்ஸை வரைகிறது (JavaScript உடன்).

SVG பற்றி

  • SVG XML அடிப்படையிலானது, அதாவது ஒவ்வொரு உறுப்பும் SVG DOM க்குள் கிடைக்கும்
  • நீங்கள் SVG கிராபிக்ஸில் JavaScript நிகழ்வு கையாளிகளை இணைக்கலாம்
  • SVG இல், ஒவ்வொரு வரையப்பட்ட வடிவமும் ஒரு பொருளாக நினைவில் வைக்கப்படுகிறது
  • SVG பொருளின் பண்புக்கூறுகள் மாற்றப்பட்டால், உலாவி தானாகவே வடிவத்தை மீண்டும் வழங்கும்
  • அளவிடக்கூடியது - எந்த தரத்தையும் இழக்காமல் பெரிதாக்கலாம்

கேன்வாஸ் பற்றி

  • கேன்வாஸ் பிக்சல் மூலம் பிக்சல் வழங்கப்படுகிறது
  • கேன்வாஸில், கிராபிக் வரையப்பட்ட பிறகு, அது உலாவியால் மறக்கப்படுகிறது
  • அதன் நிலை மாற்றப்பட வேண்டும் என்றால், முழு காட்சியும் மீண்டும் வரையப்பட வேண்டும்
  • கிராபிக் மூலம் மூடப்பட்டிருக்கக்கூடிய எந்த பொருட்களும் சேர்த்து மீண்டும் வரையப்பட வேண்டும்
  • பிக்சல்-அடிப்படையிலான - பெரிதாக்கும் போது தரம் குறையும்

SVG மற்றும் கேன்வாஸ் ஒப்பீடு

கீழே உள்ள அட்டவணை கேன்வாஸ் மற்றும் SVG இடையே உள்ள சில முக்கியமான வேறுபாடுகளைக் காட்டுகிறது:

SVG கேன்வாஸ்
தீர்மானத்திற்கு சுயாதீனமானது தீர்மானத்தை சார்ந்தது
நிகழ்வு கையாளிகளுக்கான ஆதரவு நிகழ்வு கையாளிகளுக்கு ஆதரவு இல்லை
நல்ல உரை வழங்கும் திறன்கள் மோசமான உரை வழங்கும் திறன்கள்
சிக்கலானதாக இருந்தால் மெதுவான வழங்கல் விளையாட்டு பயன்பாடுகளுக்கு ஏற்றது
விளையாட்டு பயன்பாடுகளுக்கு ஏற்றது அல்ல .png அல்லது .jpg ஆக விளைவாக வரும் படத்தை சேமிக்கலாம்
DOM இல் கையாளக்கூடியது கிராபிக்-தீவிர விளையாட்டுகளுக்கு நன்கு ஏற்றது

🤔 எப்போது எதைப் பயன்படுத்துவது:

SVG பயன்படுத்தவும்: ஐகான்கள், விளக்கப்படங்கள், வரைபடங்கள், லோகோக்கள், UI கூறுகள்
கேன்வாஸ் பயன்படுத்தவும்: விளையாட்டுகள், படத்தில் திருத்தம், உடனடி கிராபிக்ஸ், பிக்சல் கையாளுதல்

ஊடாடும் SVG டெமோ

🎮 SVG உறுப்புகளுடன் ஊடாடுங்கள்

கிளிக் செய்யக்கூடிய உறுப்புகள்

SVG உறுப்புகளைக் கிளிக் செய்து பாருங்கள்

SVG நன்மைகள்:

அளவிடக்கூடியது - எந்த தரத்தையும் இழக்காமல் பெரிதாக்கலாம்
நிகழ்வு கையாளுதல் - ஒவ்வொரு உறுப்பும் கிளிக் செய்யக்கூடியது
XML அடிப்படையிலானது - SEO நட்பு மற்றும் அணுகல் எளிது
CSS மூலம் பாணியிடக்கூடியது - CSS பயன்படுத்தி வடிவமைக்கலாம்
அனிமேஷன் - CSS அல்லது JavaScript மூலம் அனிமேஷன் செய்யலாம்

SVG டுடோரியல்

SVG பற்றி மேலும் அறிய, எங்கள் SVG டுடோரியலைப் படிக்கவும்.

அடிப்படை SVG வடிவங்கள்

  • circle - வட்டங்கள்
  • rect - செவ்வகங்கள்
  • ellipse - நீள்வட்டங்கள்
  • line - நேர்கோடுகள்
  • polyline - பலகோடுகள்
  • polygon - பலகோணங்கள்

SVG பண்புக்கூறுகள்

  • fill - நிரப்பு நிறம்
  • stroke - வெளிவரையரை நிறம்
  • stroke-width - வெளிவரையரை அகலம்
  • opacity - தெளிவுத்தன்மை
  • transform - மாற்றம்
  • style - CSS பாணிகள்

📚 SVG கற்றல் ஆதாரங்கள்:

SVG கிராபிக்ஸை உருவாக்குவதற்கும் கையாளுவதற்கும் உங்களுக்கு JavaScript மற்றும் CSS அறிவு பயனுள்ளதாக இருக்கும். SVG அதன் சொந்த DOM (Document Object Model) ஐக் கொண்டுள்ளது, இது HTML DOM போன்றது.